<template>
  <el-card>
    <div>
        <el-button type="primary" plain>添加信息</el-button>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="info" plain>excel上传</el-button>
        <el-button type="info" plain>模板下载</el-button>
        <el-button type="info" plain>选择导出</el-button>
        <el-button type="info" plain>全部信息导出</el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column type="expand">
        <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="图书ID">
                <span>{{ props.row.ID }}</span>
            </el-form-item>
            <el-form-item label="图书名称">
                <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属科目">
                <span>{{ props.row.class }}</span>
            </el-form-item>
            <el-form-item label="所属阅览室">
                <span>{{ props.row.room }}</span>
            </el-form-item>
            <el-form-item label="入馆时间">
                <span>{{ props.row.time }}</span>
            </el-form-item>
            </el-form>
        </template>
        </el-table-column>
        <el-table-column
            type="selection">
        </el-table-column>
        <el-table-column
            type="index"
            :index="(currentPageNumber-1)*pageDataSize+1">
        </el-table-column>
        <el-table-column
        label="图书ID"
        prop="ID">
        </el-table-column>
        <el-table-column
        label="图书名称"
        prop="name">
        </el-table-column>
        <el-table-column
        label="所属阅览室"
        prop="room">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageNumber"
            :page-sizes="[5, 10, 20, 100]"
            :page-size="pageDataSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableDataSize">
        </el-pagination>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      // 表格的数据条数
      tableDataSize: 0,
      // 每页的数据条数
      pageDataSize: 5,
      // 当前页号
      currentPageNumber: 1,
      // 服务器的数据
      serverData: '',
      // 表格的数据
      tableData: ''
    }
  },
  // 在html渲染前进行调用数据
  created () {
    this.iniServerData()
    this.handlePage()
  },
  methods: {
    // 模拟获取服务器数据
    iniServerData () {
      this.serverData = [{
        ID: '10000001',
        name: '初级会计1',
        class: '金融经济',
        room: '经济',
        time: '2011-2-22'
      }, {
        ID: '10000002',
        name: '经济法基础2',
        class: '法律、经济',
        room: '经济、法律',
        time: '2011-3-22'
      }, {
        ID: '10000003',
        name: '电子商务概述3',
        class: '金融经济',
        room: '经济',
        time: '2011-3-2'
      }, {
        ID: '10000004',
        name: 'erp原理组成4',
        class: '金融经济、计算机',
        room: '经济、理工科',
        time: '2011-3-21'
      }, {
        ID: '10000005',
        name: 'erp原理组成5',
        class: '金融经济、计算机',
        room: '经济、理工科',
        time: '2011-3-21'
      }, {
        ID: '10000006',
        name: '电子商务概述6',
        class: '金融经济',
        room: '经济',
        time: '2011-3-2'
      }, {
        ID: '10000007',
        name: '经济法基础7',
        class: '法律、经济',
        room: '经济、法律',
        time: '2011-3-22'
      }, {
        ID: '10000008',
        name: '经济法基础8',
        class: '法律、经济',
        room: '经济、法律',
        time: '2011-3-22'
      }, {
        ID: '10000009',
        name: '经济法基础9',
        class: '法律、经济',
        room: '经济、法律',
        time: '2011-3-22'
      }, {
        ID: '10000010',
        name: '经济法基础10',
        class: '法律、经济',
        room: '经济、法律',
        time: '2011-3-22'
      }]
    },
    // 处理分页
    handlePage () {
      const begin = (this.currentPageNumber - 1) * this.pageDataSize + 1
      this.tableData = this.serverData.slice(begin, begin + this.pageDataSize)
      this.tableDataSize = this.serverData.length
    },
    // 每页条数变换
    handleSizeChange (val) {
      this.pageDataSize = val
      this.handlePage()
    },
    // 每页页码变换
    handleCurrentChange (val) {
      this.currentPageNumber = val
      this.handlePage()
    }
  }
}
</script>

<style lang="less" scoped>
   .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
